<template>
	<view class="">
		<view class="user__home">
			<view class="pic_container">
				<u-avatar :src="itemData.icon" size="90"></u-avatar>
			</view>
			<view class="name">
				{{itemData.name}}
			</view>
			<view class="contentmenu">
				<view class="fans">
					粉丝：{{user.fans}}
				</view>
				<view class="follow">
					关注：{{user.follows}}
				</view>
			</view>
			<view v-if="uid!==itemData.userId" class="btn_container">
				<u-button @click="handleFollow" :customStyle="{...getStyle(itemData.isFollowed)}"
					type="primary">{{itemData.isFollowed?'取关':'关注'}}</u-button>
			</view>
		</view>
		<view v-for="(item,index) in params.list" :key="index">
			<ABlogCard :item="item"></ABlogCard>
		</view>
	</view>

</template>

<script>
	import {
		follow,
		getMyComment
	} from '@/api/forum.js'
	import {
		mapGetters
	} from "vuex";
	import store from '@/store'
	import PersonLog from '@/pages/tabBar/static/images/user/woman.png'
	export default {
		mounted() {
			uni.$on('reloadlist', () => {
				this.pageParams.pageNum = 1
				this.getList({
					...this.pageParams,
					userId: this.itemData.userId
				}, false)
			})
		},
		onLoad(options) {
			let decodeURIComponentStr = decodeURIComponent(options.item);
			this.itemData = JSON.parse(decodeURIComponentStr);
			console.log(this.itemData);
			getMyComment({
				userId: this.itemData.userId
			}).then(res => {
				this.user.fans = res.data.fans
				this.user.follows = res.data.follows
				this.params.total = res.data.total
				this.params.list = res.data.blogList
			})
		},
		data() {
			return {
				user: {
					fans: 0,
					follows: 0
				},
				pageParams: {
					pageNum: 1,
					pageSize: 5,
				},
				params: {
					list: [],
					total: 0
				},
				itemData: {},
				PersonLog: PersonLog,
				myBtn: {
					width: '160rpx',
					backgroundColor: '#fb7299',
					color: '#fff',
					border: 'none',
					padding: '10rpx 20rpx',
					fontSize: '1.1rem'
				},
				cancelBtn: {
					width: '160rpx',
					backgroundColor: '#fba4c2',
					padding: '10rpx 20rpx',
					color: '#fff',
					border: 'none',
					fontSize: '1.1rem'
				}
			}
		},
		computed: mapGetters(['userInfo', 'uid']),
		methods: {
			getList(data, flag = true) {
				if (flag) {
					getMyComment(data).then(res => {
						this.user.fans = res.data.fans
						this.user.follows = res.data.follows
						this.params.total = res.data.total
						this.params.list = this.params.list.concat(res.data.blogList)
					})
				} else {
					getMyComment(data).then(res => {
						this.user.fans = res.data.fans
						this.user.follows = res.data.follows
						this.params.total = res.data.total
						this.params.list = res.data.blogList
					})
				}

			},
			handleUserInfo() {},
			getStyle(flag) {
				return flag ? this.cancelBtn : this.myBtn
			},
			handleFollow() {
				follow(this.itemData.userId, !this.itemData.isFollowed).then(res => {
					if (res.code === 200) {
						this.itemData.isFollowed = !this.itemData.isFollowed
						console.log(this.itemData);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.user__home {

		width: 100%;
		background-image: url('');
		background-repeat: no-repeat;
		height: 390rpx;
		background-size: cover;
	}

	.user__home {
		.pic_container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 20rpx 0;

			image {
				width: 120rpx;
				height: 120rpx;
			}

		}

		.name {
			padding: 0rpx 0 20rpx 0;
			text-align: center;
			font-weight: 600;
		}

		.contentmenu {
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				color: white;
				margin: 0 20rpx;
				padding: 10rpx 20rpx;
				background-color: #ccc;
				border-radius: 20rpx;
				font-size: 0.8rem;
			}
		}

		.btn_container {
			display: flex;
			justify-content: center;
			align-items: center;

			margin: 20rpx 0;


		}
	}
</style>